<template>
	<view>
		<!-- 导航栏 -->
		<u-navbar
			title="地址管理"
			:is-back="true"
			:title-bold="true"
			:background="background"
			title-color="#fff"
			:border-bottom="false"
		></u-navbar>

		<!-- 主体内容 -->
		<view class="content_box">
			<view class="address_box">
				<view class="title">地址管理</view>
				<u-line margin="25rpx 25rpx" length="90%" />
				<view class="address_list_box">
					<view class="address_item" v-for="(item, index) in list" :key="index" @click="onchange(item)">
						<view class="top">
							<view class="left">
								<view class="user_info">
									<text>{{ item.contactName }}</text>
									<text style="margin-left: 20rpx">{{ item.contactPhone }}</text>
								</view>
								<view class="address_text">
									{{ item.address }}
								</view>
							</view>
							<view class="right">
								<u-icon
									name="trash"
									style="margin-right: 20rpx"
									color="#888"
									size="40"
									@click.native.stop="handleDelect(index, item.id)"
								></u-icon>
								<u-icon name="edit-pen" color="#888" size="40" @click="handleUpdate(item)"></u-icon>
							</view>
						</view>
						<view class="bottom">
							<text style="margin-right: 50rpx">设为默认地址</text>
							<u-radio-group v-model="value">
								<u-radio :name="item.id" active-color="#ff9900"></u-radio>
							</u-radio-group>
						</view>
						<u-line margin="25rpx 25rpx" length="90%" />
					</view>
				</view>
			</view>

			<view class="btn_box">
				<u-button type="warning" shape="circle" @click="navBtn">新增收货地址</u-button>
			</view>
		</view>
	</view>
</template>

<script>
import { userAddressList, userAddressDefault, userAddressDelete } from '@/api/user'

export default {
	data() {
		return {
			background: {
				backgroundColor: '#ff9900'
			},
			list: [],
			value: null
		}
	},
	watch: {
		list: {
			handler(val) {
				const info = this.list.find((i) => i.isDefaultAddress === 1)
				console.log(info)
				this.value = info ? info.id : ''
			},
			deep: true
		}
	},
	onShow() {
		this.getUserAddressList()
	},
	methods: {
		async onchange(item) {
			if (this.value === item.id) {
				return
			}
			await userAddressDefault(item.id)
			this.value = item.id
		},
		async handleDelect(index, id) {
			await userAddressDelete(id)
			this.list.splice(index, 1)
		},
		navBtn() {
			uni.navigateTo({
				url: '/pages/my/addAddress'
			})
		},
		async getUserAddressList() {
			const { data } = await userAddressList()
			this.list = data
		},
		handleUpdate(row) {
			uni.navigateTo({
				url: `/pages/my/addAddress?info=${JSON.stringify(row)}`
			})
		}
	}
}
</script>

<style>
page {
	background-color: #eeeeee;
}
</style>

<style lang="less" scoped>
.content_box {
	padding: 0 20rpx;
	margin-top: 25rpx;

	.address_box {
		width: 100%;
		// height: 400rpx;
		background-color: #fff;
		padding: 24rpx 28rpx;
		border-radius: 10rpx;

		.title {
			font-size: 36rpx;
		}

		.address_list_box {
			.address_item {
				.top {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.left {
						max-width: 500rpx;

						.user_info {
							font-size: 32rpx;
						}

						.address_text {
							margin-top: 8rpx;
							font-size: 26rpx;
							word-break: break-all;
						}
					}

					.right {
						color: #888;
						font-size: 26rpx;
					}
				}

				.bottom {
					margin-top: 20rpx;
					display: flex;
					justify-content: flex-end;
				}
			}
		}
	}

	.btn_box {
		width: 322rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		/deep/ button{width: 322rpx;height: 60rpx;line-height:60rpx;font-size:28rpx;}
	}
}
</style>
